<template>
  <div class="widgetFormBox" v-show="props.isShow">
    <div class="formBox">
      <!--图片上传组件-->
      <el-upload
          class="upload-demo"
          drag
          :before-upload="uploadImage"
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">{{ loading ? "正在上传" : "拖拽图片到这里或点击上传" }}</div>
      </el-upload>
      <div class="formContent">
        <!--预览图片-->
        <div class="formImage">
          <el-image
            fit="contain"
            class="widgetImg"
            :src="widgetFormData.image"
          />
        </div>
        <!--其他内容-->
        <div class="formRight">
          <div class="formInput">
            <span>路径：</span>
            <el-input v-model.trim="widgetFormData.path" placeholder="模型路径" clearable />
          </div>
          <div class="formInput">
            <span>文件名：</span>
            <el-input v-model.trim="widgetFormData.model" placeholder="模型文件名" clearable />
          </div>
          <div class="formBtn">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="hideComponents">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  /*组件参数接收
  * isShow Boolean 是否显示组件
  * isUpdate Boolean 修改数据或者添加新数据
  * widgetProp Object 需要修改的数据
  *
  * hide function 隐藏组件*/
  import {reactive,ref,defineProps,defineEmits,watch} from "vue";

  import {http} from "../config/axios/index.js"
  import {ElMessage} from "element-plus";

  //表单信息
  const widgetFormData = reactive({
    image: "",
    path: "",
    model: ""
  })

  //接收传参
  const props = defineProps(["isShow","isUpdate","widgetProp"])
  const emits = defineEmits(["hide"])

  //上传状态
  const loading = ref(false)

  //图片上传
  async function uploadImage(file){
    loading.value = true
    let type = "error"

    const formData = new FormData()
    formData.append("file",file)
    const res = await http({
      method: "POST",
      data: formData,
      url: "utils/upload_pic?type=widget"
    })
    if(res.data.code === 0){
      type = "success"
      widgetFormData.image = res.data.data.url
    }
    loading.value = false
    //提示消息
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
      type
    })
    return false
  }

  //隐藏组件
  function hideComponents(){
    emits("hide")
  }

  //监听判断是否修改
  watch(()=>props.isUpdate,(fla)=>{
    if(fla){
      for (let key in widgetFormData) {
        widgetFormData[key] = props.widgetProp[key]
      }
    }else{
      //新添加数据时初始化
      for (let key in widgetFormData) {
        widgetFormData[key] = ""
      }
    }
  })

  //提交
  async function submit(){
    let data = {}
    let type = "error"
    let msg
    if(props.isUpdate){
      //修改
      const res = await http({
        method: "GET",
        url: "widget/update_widget",
        params: {
          ...widgetFormData,
          wid: props.widgetProp.wid,
          type: "update"
        }
      })
      msg = res.data.msg
      if(res.data.code === 0){
        type = "success"
        data = {...widgetFormData,wid: props.widgetProp.wid}
        emits("hide",data,true)
      }
    }else{
      //添加
      const res = await http({
        method: "GET",
        url: "widget/add_widget",
        params: {...widgetFormData}
      })
      msg = res.data.msg
      if(res.data.code === 0){
        type = "success"
        data = {...widgetFormData,...res.data.data}
        emits("hide",data,true)
      }
    }
    //提示消息
    ElMessage({
      showClose: true,
      message: msg,
      center: true,
      type
    })
  }
</script>

<style scoped>
  .widgetFormBox{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.4);
    z-index: 999;
  }
  .formBox{
    width: 500px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 10px;
    background-color: #ffffff;
    border-radius: 5px;
  }
  :deep(.upload-demo .el-upload-dragger){
    padding: 10px;
  }
  .formContent{
    width: 100%;
    height: 245px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .formImage{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .widgetImg{
    width: 240px;
    height: 245px;
  }
  .formRight{
    padding: 15px 0 15px 10px;
  }
  .formInput{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
  }
  .formInput span {
    white-space: nowrap;
  }
</style>